<template>
    <div>
        <!-- <div class="tab-head">
            <a href="javascript:;" @click="check(0)" :class="isTab == 0 ? 'active' : ''">{{ $t('game_details') }}</a> 
            <a href="javascript:;" @click="check(1)" :class="isTab == 1 ? 'active' : ''">評價<span class="tab-head-sub">509698</span></a> 
            <a href="javascript:;" @click="check(2)" :class="isTab == 2 ? 'active' : ''">{{ $t('game_activity') }}</a>
            <a href="javascript:;" @click="check(3)" :class="isTab == 3 ? 'active' : ''">{{ $t('game_notice') }}</a>
            <a href="javascript:;" @click="check(4)" :class="isTab == 4 ? 'active' : ''">{{ $t('game_Strategy_Guide') }}</a>
        </div> -->

        <el-tabs v-model="isTab" class="demo-tabs el_tab">
            <el-tab-pane :label="$t('game_details')" name="0"></el-tab-pane>
            <!-- <el-tab-pane label="評價" name="1"></el-tab-pane> -->
            <el-tab-pane :label="$t('game_activity')" name="2"></el-tab-pane>
            <el-tab-pane :label="$t('game_notice')" name="3"></el-tab-pane>
            <el-tab-pane :label="$t('game_Strategy_Guide')" name="4"></el-tab-pane>
        </el-tabs>

        <div v-show="isTab == 0 || isTab == 1" :class="isTab == 0 ? 'dev-words' : 'dev-words2'">
            
            <!-- 左右滚动轮播 -->
            <ScrollContainer :publicize_img="freeGiftList.publicize_img"/> 
            
            <div v-show="isTab == 0">
                <!-- //版本更新介绍 -->
                <div class="game_info">
                    <div class="introduce">
                        <h3>{{ $t('game_Introduction') }}</h3>
                        <div class="download-game-category">
                            <div class="tag_list">
                                <span class="tag" v-for="(item,index) in freeGiftList.tag" :key="index">{{item}}</span>
                            </div>
                        </div>

                        <!-- //游戏介绍 -->
                        <div class="expandable">
                            <div class="bui-expander-content" ref="content_introduce">
                                <div class="multi-line-text">
                                    {{ freeGiftList.content }}
                                    <span v-show="!freeGiftList.content">{{ $t('No_content') }}</span>
                                </div>
                            </div>
                            <div class="bui-expander-switch" @click="switch_introduce_fn"><span ref="text_introduce">{{ $t('expand') }}</span><i ref="i_introduce"></i></div>
                        </div>
                    </div>
                </div>

                

                <!-- <div class="game_info">
                    <div class="introduce">
                        <h3>{{ $t('editor_recommendation') }}</h3>
                    </div>

                    <div class="expandable" style="margin-left: 0;margin-top: 1em;">
                        <div class="bui-expander-content" ref="content">
                            <div class="multi-line-text">
                                {{ freeGiftList.builder_desc }}
                                <span v-show="!freeGiftList.builder_desc">{{ $t('No_content') }}</span>
                            </div>
                        </div>
                        <div class="bui-expander-switch" @click="switch_bar_fn"><span ref="text">{{ $t('expand') }}</span><i ref="i"></i></div>
                    </div>
                </div>         -->
                

                
                
                

                
                <!-- <div class="game_info">
                    <div class="introduce">
                        <h3>最近更新</h3>
                        
                        
                        <div class="expandable">
                            <div class="bui-expander-content" ref="content_update">
                                <div class="subtitle">2024年6月5日（安卓）</div>
                                <div class="multi-line-text">
                                    全新4.7版本「纺坠终久之梦」现已推出！

                                    【新角色】克洛琳德、希格雯、赛索斯
                                    「秉烛狝影 · 克洛琳德(雷)」，不败的决斗代理人，使用单手剑的五星雷元素角色。
                                    「龙女妙变 · 希格雯(水)」，美露莘护士长，使用弓的五星水元素角色。
                                    「衡明知度 · 赛索斯(雷)」，沙原的使者，使用弓的四星雷元素角色。

                                    【新玩法】幻想真境剧诗
                                    在一切故事开始之前，在一切故事终结之后，在幻想与真实的隙间，如今依然上演着永无休止的剧诗——没有起始，也没有终结，因为两者在「故事」的叙述中并无分别。
                                    完成其中的挑战亦即演出，就能获得珍奇的宝藏。每隔一段时间，幻想真境剧诗的挑战与限制也会发生变化。

                                    【新活动】版本主题活动 「安固诸方之述演」、阶段性活动「飞迸湍流二重奏」、「纷变繁相豪武谭」、「绎思振笔集」
                                    为了改善提瓦特各地的治安，千岩军正与友邻各国的将士进行一场联合推演，探寻改善战法的要点…
                                    完成想定挑战，将获取「分析进度」，解锁珍贵的物资与奖励。

                                    【新剧情】魔神任务更新、传说任务更新
                                    魔神任务 第四章 第六幕 「睡前故事」  
                                    克洛琳德传说任务 迅捷剑之章 第一幕「夜色无声」  
                                    希格雯传说任务 海精之章 第一幕「谎言的温度」  

                                    【新武器】赦罪、白雨心弦、筑云
                                    全新限定五星武器「单手剑 · 赦罪」、「弓 · 白雨心弦」、四星活动武器「弓 · 筑云」开放获取。

                                    【七圣召唤更新】全新角色牌、全新行动牌
                                    全新角色牌、行动牌开放获取。
                                </div>
                            </div>
                            <div class="bui-expander-switch" @click="switch_update_fn"><span ref="text_update">展开</span><i ref="i_update"></i></div>
                        </div>
                    </div>
                </div>  -->


                <!-- <div class="game_info">
                    <div class="introduce">
                        <h3>詳細信息</h3>
                        <div class="expandable">
                            <div class="information-container detail-information">
                                <div><span>游戏名称：原神</span></div> 
                                <div><span>上架平台：Android、PC</span></div> 
                                <div><span>开发商：上海米哈游影铁科技有限公司</span></div> 
                                <div><span>安卓版本信息：<span class="information-android-version">4.7.0_23093867_23435602</span><span>2024-06-05 06:00:00更新</span></span></div> 
                                <div><span>安卓文件大小：349 MB</span></div>
                            </div>
                            <div class="information-contract"><a target="_blank" href="https://app.biligame.com/access_detail?id=103496">权限信息</a> <i class="bui-vr"></i> <a target="_blank" href="https://user.mihoyo.com/#/about/privacyInGame?app_id=4&amp;lang=zh-cn&amp;channel_id=14&amp;biz=hk4e_cn">隐私政策</a></div>
                        </div>
                    </div>
                </div>  -->

                <GiftAll :freeGiftList="allGiftList" :gameId="gameId" :detailWapper_farther="changeWap"/>

            </div>

            <!-- 评分组件 -->
            <!-- <Score />  -->
            <!-- 评论组件 -->
            <!-- <Comment />  -->
            
            

        </div>

        <div class="blocker" v-if="detailWapper">
            <div class="modal" v-if="detailWapper">
                <div class="close" @click="detailWapper = false"></div>
                <div class="pack_detail">
                    <h2>{{ $t('Gift_Introduction') }}</h2>
                    <div class="pack_game">
                        <div class="pack_game_img" :style="`background-image:url(${$baseUrl+giftDetail.icon})`"></div>
                        <div class="pack_game_btn">
                            <div>
                                <button class="play_btn" @click="open_game(freeGiftList.id,freeGiftList.pixel_code)">{{ $t('play_game') }}</button>
                                <!-- <button class="play_btn">領取虛寶</button> -->
                                <button v-if="!isShowCode" class="play_btn" @click="getGift()">{{gift_type?`${giftDetail.integral} ${$t('integral_redemption')}`:`${$t('free_receive')}`}}</button>
                                <button v-if="isShowCode" class="play_btn" @click="copy_code(giftDetail.gift_code)">{{ $t('copy_code') }}</button>
                            </div>
                            <p v-if="isShowCode">{{ $t('gift_code') }}：<b>{{ giftDetail.gift_code }}</b></p> 
                        </div>
                    </div>
                    <div class="pack_detail_item">
                        <h4>{{ $t('Gift_Details') }}</h4>
                        <p>{{ giftDetail.gift_content }}</p>
                    </div>
                    <div class="pack_detail_item">
                        <h4>{{ $t('usage_method') }}</h4>
                        <!-- <p>兑换路径：点击左上角头像-兑换码，输入兑换码去邮箱领取，邮箱会在通关剧情3-2后开启。</p> -->
                         <p>{{ giftDetail.instructions }}</p>
                    </div>
                    <div class="pack_detail_item">
                        <h4>{{ $t('Effective_time') }}</h4>
                        <p>{{giftDetail.start_at}}~{{giftDetail.end_at}}</p>
                    </div>
                    <!-- <div class="pack_detail_item">
                        <h4>友情提示</h4>
                        <p>{{ giftDetail.gift_Note }}</p>
                    </div> -->
                </div>
            </div>
        </div>

        <div class="list_hot" v-show="isTab == 3">
            <div class="Card-header_card">
                <div class="announcement">
                    <ul class="list_con" v-for="item in noticeList" :key="item.id">
                        <a @click="$router.push('/home/announcement/announcementDetails/'+item.id)" target="_blank"><li><p>[公告] {{item.article_title}}</p><span>{{ item.created_at }}</span></li></a>
                    </ul>
                    <p class="isNull isNull_notext" v-if="noticeList.length == 0">{{ $t('no_notice') }}</p>
                </div>
            </div>
        </div> 

        <div class="list_hot" v-show="isTab == 4">
            <div class="Card-header_card">
                <div class="announcement">
                    <ul class="list_con" v-for="item in strategyList" :key="item.id">
                        <a @click="$router.push('/home/strategy/strategyDetails/'+item.id)" target="_blank"><li><p>[{{ $t('game_Strategy_Guide') }}] {{item.article_title}}</p><span>{{ item.created_at }}</span></li></a>
                    </ul>
                    <p class="isNull isNull_notext" v-if="strategyList.length == 0">{{ $t('no_Strategy_Guide') }}</p>
                </div>
            </div>
        </div> 


        <div class="strategy-list"  v-show="isTab == 2">
            <div class="strategy-list-item" v-for="item in activityList" :key="item.id" @click="$router.push('/home/ActivityDetails/'+item.id)">
                <div class="strategy-content">
                    <h2 class="strategy-title text-overflow">{{ item.article_title }}</h2> 
                    <p class="summary text-overflow">{{ item.desc }}</p>
                    <div class="description">
                        <!-- <span class="game-category">角色评测</span>  -->
                        <span class="game-name">{{ item.game_name }}</span> 
                        <span class="video-pv">
                            <img src="" alt="" class="hint-icon">
                            {{ item.click_num }}
                        </span>
                        <!-- <span class="thumb-count border"><img src="" class="hint-icon" style="width: 13px; margin-bottom: 2px;">
                            24145
                        </span> -->
                    </div>
                </div>
                <div :style="`background-image: url(${$baseUrl+item.article_home_img})`" class="strategy-cover"></div>
            </div>
            <p class="isNull isNull_notext" v-if="activityList.length == 0">{{ $t('no_activities') }}</p>
        </div>

        <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo"/>
    </div>

</template>

<script setup>
    import ScrollContainer from "@/components/GameCenter/ScrollContainer/index.vue"  
    import Score from "@/components/GameCenter/Score/index.vue"  //游戏评分
    import Comment from "@/components/GameCenter/Comment/index.vue"  //游戏评论
    import GiftAll from "@/components/GiftAll/index.vue"
    import { ref,reactive,watch } from "vue"
    import switch_bar from "@/hooks/switch_bar"
    import axios from '@/utils/api'
    import { useRouter,useRoute } from 'vue-router'
    import { useUserInfoStore } from '@/store/modules/user_info/index';
    import {useGetGameUrl} from '@/hooks/getGameUrl'
    import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
    const router = useRouter()
    const route = useRoute();
    const user_infoStore = useUserInfoStore();
    let user_info = reactive(user_infoStore.userInfo)
    let userid = user_infoStore.userInfo.id || ''
    

    //版本更新介绍
    let switch_status = ref(true) //展开收起状态
    const content = ref() //文本容器
    const text = ref()//展开收起按钮
    const i = ref()//图标按钮
    const switch_bar_fn = ()=>{//点击函数
        switch_bar(switch_status,content,text,i)
    }
    let gift_type = ref('')
    //游戏介绍
    let switch_status_introduce = ref(true) //展开收起状态
    const content_introduce = ref() //文本容器
    const text_introduce = ref() //展开收起按钮
    const i_introduce = ref() //图标按钮
    const switch_introduce_fn = ()=>{ //点击函数
        switch_bar(switch_status_introduce,content_introduce,text_introduce,i_introduce)
    }

    //最近更新介绍
    let switch_status_update = ref(true) //展开收起状态
    const content_update = ref() //文本容器
    const text_update = ref() //展开收起按钮
    const i_update = ref() //图标按钮
    const switch_update_fn = ()=>{ //点击函数
        switch_bar(switch_status_update,content_update,text_update,i_update)
    }

    let isTab = ref("0")
    const check = (index)=>{
        isTab.value = index
    }

    const props = defineProps(['freeGiftList','gameId'])
    const gameId = props.gameId //游戏id
    // const gameId = route.params.id; //游戏id


    //礼包详情弹出框展示
    const allGiftList = ref([])
    const getallGiftList = async (gameId) =>{
        const list = await axios.get('/getGiftList?game_id='+gameId+'&user_id='+userid)
        // Object.assign(allGiftList,list.data.data)
        allGiftList.value = list.data.data
        console.log(allGiftList,'allGiftList');
    }
    getallGiftList(gameId)

    let giftDetail = reactive({})
    let isShowCode = ref(0)
    let detailWapper = ref(false);
    const changeWap = (type,item)=>{ //供子组件触发打开礼包详情
        detailWapper.value = type
        giftDetail = item
        isShowCode.value = 0
        gift_type = giftDetail.gift_type
        console.log(giftDetail,'giftDetail');
    }

    const noticeList = reactive([])
    const getNoticeList = async (gameId) =>{
        const list = await axios.get('/getNoticeList?game_id='+gameId)
        Object.assign(noticeList,list.data.data)
        // console.log(noticeList,'noticeList');
    }
    getNoticeList(gameId)

    const strategyList = ref([])
    const getStrategyList = async (gameId) =>{
        const list = await axios.get('/getStrategyList?game_id='+gameId)
        strategyList.value = list.data.data
    }
    getStrategyList(gameId)

    const activityList = reactive([])
    const getActivityList = async (gameId) =>{
        const list = await axios.get('/getActivityList?game_id='+gameId)
        Object.assign(activityList,list.data.data)
        console.log(activityList,'activityList');
    }
    getActivityList(gameId)

    
    const open_game = async (game_id,pixel_code) => {
        const data = await useGetGameUrl(game_id,userid)
        console.log(data.game_url);

        // localStorage.setItem('game_url',data.game_url)
        const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: data.game_name,pixel_code } }).href;
        window.open(url)
        
    }

    const getGift = async (giftId)=>{
        const data = await axios.get('/userGetGift?gift_id='+giftDetail.id+'&user_id='+userid)
        console.log(data);
        if(data.code == 200){
            if(lang.value == 'en'){
                ElMessage.success('Received successfully')
            }else{
                ElMessage.success('領取成功')
            }
           
            isShowCode.value = 1
            giftDetail.gift_code = data.data.gift_code
        }else if(data.code == 7016){
            if(lang.value == 'en'){
                ElMessage.warning('already received it')
            }else{
                ElMessage.warning('已經領取過了')
            }
            
            isShowCode.value = 1
            giftDetail.gift_code = data.data.gift_code
        }else if(data.code == 7017){
            if(lang.value == 'en'){
                ElMessage.warning('Insufficient remaining inventory of gift packages')
            }else{
                ElMessage.warning('禮包剩餘庫存不足')
            }
        }else if(data.code == 7021){
            if(lang.value == 'en'){
                ElMessage.warning('The gift package can only be received as a formal member. Please verify as a formal member')
            }else{
                ElMessage.warning(data.message)
            }
            
            visible.value = true
        }
        else{
            ElMessage.error(data.message)
        }
    }

    const copy_code = (code) =>{
        if (navigator.clipboard && navigator.clipboard.writeText) {
            // 当前环境支持 clipboard API
            navigator.clipboard.writeText(code).then(() => {
                if(lang.value == 'en'){
                    ElMessage.success('copy Success');
                }else{
                    ElMessage.success('复制成功');
                }
                
            }).catch(err => {
                ElMessage.error('复制失败');
            });
        } else {
            if(lang.value == 'en'){
                ElMessage.warning('The current environment does not support copying function, please manually copy');
            }else{
                ElMessage.warning('当前环境不支持复制功能，请手动复制');
            }
            
        }
    }
    
    // 监听路由参数变化
    watch(() => route.params.id, (newId) => {
        getallGiftList(newId);
        getNoticeList(newId);
        getStrategyList(newId);
        getActivityList(newId);
    });

    const userInfo = ref([])
    const getUserInfo = async () =>{
        const data = {
            user_id:user_info.id,
        }
        const list = await axios.post('/getUserInfo',data)
        userInfo.value = list.data
        user_infoStore.setUserinfo(list.data.user_info)
    }

    const visible = ref(false)
	
    const handleClose = () => {
        visible.value = false
    };

    let lang = ref('')
	if(localStorage.getItem('lang') == 'en'){
		lang.value = 'en'
	}else{
		lang.value = 'zh'
	}
</script>

<style lang="less" scoped>
.el_tab *{
    font-size: 18px;
}
.tab-head {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    a {
        color: #000;
        display: inline-block;
        font-size: 18px;
        padding-bottom: .8em;
        margin-right: 3em;
        text-decoration: none;
        .tab-head-sub {
            font-size: 12px;
            color: #999;
            margin-left: 3px;
        }
    }
    a:hover{
        color: @primary-color;
        border-bottom: 2px solid  @primary-color;
    }
    a.active{
        color: @primary-color;
        border-bottom: 2px solid  @primary-color;
    }
}
.dev-words{
    .expandable{
        margin-left: 30px;
        .bui-expander-content{
            overflow: hidden;
            transition: max-height .5s ease;
            max-height: 10.5em;
            .multi-line-text {
                color: #666;
                padding-right: 1px;
                white-space: pre-wrap;
                line-height: 2;
            }
        }
        .bui-expander-switch {
            text-align: right;
            color: #23ade5;
            cursor: pointer;
            line-height: 2;
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
        }
        i {
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url();
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            height: 14px;
            margin-left: 5px;
        }
        .switch-icon-down{
            background-image: url() !important;
        }
    }

    .game_info{
        .introduce{
            .information-contract {
                margin: initial;
                width: 190px;
                margin-top: 12px;
                a {
                    color: #00aeec;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 20px;
                    text-decoration: none;
                }
                .bui-vr {
                    display: inline-block;
                    vertical-align: middle;
                    width: 1px;
                    height: 1em;
                    background-color: #dce3e6;
                    margin: 0 1em;
                }
            }
            div{
                margin-top: 6px;
            }
            .detail-information{
                margin-top: 10px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #61666d;
            }
            .subtitle {
                font-size: 16px;
                color: #999;
                padding: 5px;
            }
            h3 {
                font-size: 18px;
                padding-left: 19px;
                font-weight: 400;
                position: relative;
                margin-top: 2em;
            }
            h3:before {
                content: "";
                width: 4px;
                height: 18px;
                background-color: #23ade5;
                border-radius: 2px;
                left: 0;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            .download-game-category {
                margin-bottom: 7px;
                max-height: 65px;
                overflow: hidden;
                .tag_list {
                    font-size: 12px;
                    color: #999;
                    text-align: left;
                    line-height: 2.3;
                    margin-top: 10px;
                    .tag {
                        display: inline-block;
                        border: 1px solid #e6e6e6;
                        border-left: 0 none;
                        padding-left: 4px;
                        padding-right: 8px;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        margin-right: 10px;
                        margin-left: 10px;
                        line-height: 22px;
                        height: 22px;
                        position: relative;
                    }
                    .tag:before {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        border-left: 1px solid #e6e6e6;
                        border-bottom: 1px solid #e6e6e6;
                        top: 50%;
                        -webkit-transform: translateY(-50%) rotate(50deg) skew(10deg);
                        -ms-transform: translateY(-50%) rotate(50deg) skew(10deg);
                        transform: translateY(-50%) rotate(50deg) skew(10deg);
                        left: -8px;
                    }
                }
            }
        }
    }   
}
// .dev-words::before{
//     content: '';
//     display: block;
//     background-image: url();
//     width: 25px;
//     height: 19px;
//     float: left;
// }
.dev-words2::before{
    content: none;
}
.strategy-list-item:hover{
    .strategy-title{
        color: @primary-color;
    }
}
.strategy-list-item{
    cursor: pointer;
    width: 100%;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0;
    .strategy-content {
        float: left;
        max-width: 600px;
        .strategy-title {
            max-width: 600px;
            font-size: 20px;
            font-weight: 400;
            font-family: "Microsoft Yahei", "PingFang SC", Helvetica, Arial, sans-serif;
            margin: 0;
        }
        .summary {
            margin: 6px auto 18px;
            font-size: 12px;
            color: #6d757a;
        }
        .text-overflow {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .description {
            width: 600px;
            color: #999;
            line-height: 14px;
            margin-top: 40px;
            span {
                color: #999;
                display: inline-block;
                font-size: 12px;
                overflow: hidden;
                margin-right: 20px;
            }
            .thumb-count{
                margin: 0;
                padding-right: 10px;
                border-right: 1px solid #ccd0d7;
            }
            .video-pv{
                margin: 0;
                padding-left: 10px;
            }
            .video-pv,.thumb-count {
                float: right;
                margin: 0;
                .hint-icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 3px;
                }
                img{
                    vertical-align: middle;
                }
            }
        }
    }
    .strategy-cover {
        float: right;
        width: 120px;
        height: 90px;
        border-radius: 8px;
        overflow: hidden;
        background-size: cover;
        // background-image: url(https://img0.baidu.com/it/u=3439254069,3812332738&fm=253&fmt=auto&app=120&f=JPEG?w=1083&h=500);
    }
}

.blocker::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    
}
.blocker{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    z-index: 2000 !important;
    .modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 500px;
        background-color: #fff;
        box-shadow: 1px 3px 20px rgba(0, 0, 0, .3);
        padding: 30px;
        border-radius: 12px;
        animation: popIn 0.3s ease-out;
        .pack_detail{
            h2{
                text-align: center;
                color: #fb9817;
            }
            .pack_detail_item{
                margin-top: 15px;
                p{
                    color: #999;
                    font-size: 14px;
                    margin-top: 5px;
                }
            }
            .pack_game{
                display: flex;
                align-items: center;
                margin-top: 10px;
                .pack_game_img{
                    width: 80px;
                    height: 80px;
                    // background-image: url(https://www.91easyplay.com/data/upload/game/2023-12-19/65811fd405fe7.png);
                    background-size: cover;
                    margin: initial;
                }
                .play_btn{
                    padding: 10px 20px;
                    background-color: #00ace6;
                    color: #fff;
                    border: none;
                    border-radius: 5px;
                    height: 37px;
                    margin: initial;
                    margin-left: 20px;
                    
                }
                .pack_game_btn{
                    margin: initial;
                    height: 66px;
                    p{
                        margin-left: 20px;
                        margin-top: 10px;
                        font-size: 14px;
                        color: #999;
                        span{
                            margin-left: 10px;
                            cursor: pointer;
                        }
                    }
                    button{
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.list_hot{
        .Card-header_card{
            // width: 80%;
        }
        margin-bottom: 20px;
        .card-title{
            position: relative;
        }
        .title_SE4va{
            font-size: 24px;
            color: rgba(0, 0, 0, .8);
            letter-spacing: 1px;
            line-height: 32px;
        }

        .announcement{
            width: 100%;
            // height: 300px;
            // background-color: #1890ff;
            a{
                text-decoration: none;
                color: #000;
            }
            .list_con {
                padding: 5px 0;
                li{
                    list-style: none;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #d9d9d9;
                    height: 30px;
                    cursor: pointer;
                    span{
                        float: right;
                        font-size: 13px;
                        line-height: 22px;
                        color: #7d7d7d;
                    }
                }
                li:hover{
                    color: @primary-color;
                    span{
                        color: @primary-color;
                    }
                    
                }
                p{
                    width: 75%;
                    margin-left: 0;
                    float: left;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>